
<template>
  <el-form :disabled="isDetail" class="edit-main-box" ref="form" :model="formData" :rules="isDetail ? {} : rules"
    style="width: 700px" label-position="right" label-width="100px">
    <el-form-item label="标题" prop="title">
      <el-input v-model="formData.title" placeholder="请输入" maxlength="50" />
    </el-form-item>
     <el-form-item label="副标题" prop="subtitle" >
        <el-input v-model="formData.subtitle" placeholder="请输入"  />
      </el-form-item>
    <el-form-item label="类型" prop="category_id">
      <div class="flex-row">
        <Select v-model="formData.category_id" class="flex1" :list="lst_cate" label-field="name" value-field="id"
          :show-all="false" />
        <i v-if="!isDetail" class="el-icon-circle-plus" @click="addCate" />
      </div>
    </el-form-item>
    <el-form-item v-if="type === '16'" label="封面" prop="cover_pic">
      <Upload :disabled="isDetail" :fileList.sync="imgs" :limit="1" dir-name="/medias"
        @change="setUrl(formData, 'cover_pic')" listType="img" />
    </el-form-item>
    <el-form-item label="链接" prop="url" v-if="['15', '16'].includes(type)">
      <el-input v-model="formData.url" placeholder="请输入" maxlength="255" />
    </el-form-item>
  </el-form>
</template>

<script>
import { getCateList, addCate } from '@/api/index'
import Select from '@/components/Select/index.vue'
import Upload from '@/components/Upload'
export default {
  name: 'AddDownload',
  components: { Select, Upload },
  props: {
    /** 类型  14新闻 15下载 16媒体 */
    type: {
      type: String,
      default: '14'
    },
    ruleForm: {
      type: Object,
      default: () => ({})
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgs: [],
      formData: {
        title: null,
        category_id: null,
        subtitle: null
      },
      rules: {
        cover_pic: [
          { required: true, message: '请上传', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        subtitle: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        url: [
          { required: false, message: '请输入链接', trigger: 'blur' }
        ],
        category_id: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      lst_cate: []
    }
  },
  async created() {
    this.getCate()
  },
  watch: {
    ruleForm: {
      handler(val) {
        this.formData = val
        if (val.cover_pic) {
          this.imgs = [{
            save_url: val.cover_pic
          }]
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    setUrl(row, field) {
      if (!this.imgs.length) return
      this.$set(row, field || 'url', this.imgs[0].save_url)
    },
    async getCate() {
      const res = await getCateList({ pid: this.type })
      this.lst_cate = res.data || []
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect() {
      console.log('4324', 4324)
    },
    addCate() {
      this.$prompt('请输入类型名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async ({ value }) => {
        await addCate({ pid: this.type, name: value })
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.getCate()
      })
    },
    validate() {
      return new Promise(async (resolve, reject) => {
        try {
          await this.$refs.form.validate()
          resolve(this.formData)
        } catch (error) {
          reject(error)
        }
      })
    }
  }
}
</script>
<style lang="scss">
.edit-main-box {
  .add-box {
    background-color: #2d82f8;
  }

  .el-icon-circle-plus {
    font-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    color: #409eff;
  }
}
</style>
